<template>
  <page-header-wrapper :title="false">
    <a-card>
      <a-tabs type="card" @change="onTabs">
        <a-tab-pane v-for="(item,index) in tabOpts" :key="index" :tab="item"></a-tab-pane>
      </a-tabs>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="activeColumns"
        :data="checkData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`筛选${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            筛选
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="category" slot-scope="text">
          {{ categoryOpts[text] }}
        </template>
        <template slot="status" slot-scope="text">
          {{ statusOpts1[text] }}
        </template>
        <template slot="reason1" slot-scope="text,record">
          {{ text }}{{ record.reason2 }}
        </template>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getGoodTrademark } from '@/api/other'
import otherColumns from '@/columns/other'

export default {
  components: {
    STable
  },
  name: 'CheckTrademark',
  data () {
    return {
      activeColumns: [],
      checkColumns: otherColumns.un_check,
      registerColumns: otherColumns.register,
      abandonColumns: otherColumns.abandon,
      checkData: parameters => {
        return getGoodTrademark(Object.assign(parameters, this.queryParam)).then(res => {
          this.categoryOpts = res.result.category
          this.tabOpts = res.result.status_opts
          this.statusOpts1 = res.result.status_opts1
          return res.result
        })
      },
      categoryOpts: {},
      searchInput: null,
      searchText: '',
      queryParam: {},
      tabOpts: {},
      statusOpts1: {}
    }
  },
  activated () {
    this.queryParam['filter[status]'] = 0
    this.activeColumns = this.checkColumns
  },
  methods: {
    onTabs (key) {
      this.queryParam['filter[status]'] = key
      if (key === '40') {
        this.activeColumns = this.registerColumns
      } else if (key === '50') {
        this.activeColumns = this.abandonColumns
      } else {
        this.activeColumns = this.checkColumns
      }
      this.$refs.table.refresh(true)
    },
    /**
     * o
     * @param selectedKeys
     * @param confirm
     * @param dataIndex
     */
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    /**
     * 清除
     * @param clearFilters
     */
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    }
  }
}
</script>

<style scoped>

</style>
